{include file="common/_meta"}

<title>比赛中</title>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body ng-app="app" ng-controller="controller">
<article class="cl pd-20">
<div>
        <input type="hidden" name="status" value="1"/>
        <div class="row cl clearfix font_0 mb_10">
            <label class="statusLabel pt_10 pb_10">状态切换:</label>
            <div class="statusGroup">
                <button class="btn btn-success col-sm-3" ng-class="{'disabled':info.status==10 || info.status==-1}" ng-click="qie(10)">开盆</button>
                <button class="btn btn-success col-xs-4" ng-class="{'disabled':info.status==7 || info.status==-1}" ng-click="qie(7)">七扣</button>
                <button class="btn btn-success col-xs-4" ng-class="{'disabled':info.status==6 || info.status==-1}" ng-click="qie(6)">六扣</button>
                <button class="btn btn-success col-xs-4" ng-class="{'disabled':info.status==5 || info.status==-1}" ng-click="qie(5)">五扣</button>

                {if condition="$system.fourenable == 1"}
                <button class="btn btn-success col-xs-4" ng-class="{'disabled':info.status==4 || info.status==-1}" ng-click="qie(4)">四扣</button>
                {/if}
                <button class="btn btn-danger col-xs-4" ng-class="{'disabled':info.status==0|| info.status==-1}" ng-click="togglegame()">
                    <span ng-show="info.status < -1">打开投注通道</span> <span ng-show="info.status > 0">关闭投注通道</span>
                </button>

            </div>
        </div>

        <div class="row cl mb_10">
            <label class="statusLabel">当前状态:</label>
            <label>
                <span ng-if="info.status==0">等待开始</span>
                <span ng-if="info.status==10">开盆</span>
                <span ng-if="info.status==7">七扣</span>
                <span ng-if="info.status==6">六扣</span>
                <span ng-if="info.status==5">五扣</span>
                <span ng-if="info.status==-1">比赛结束</span>
            </label>
        </div>

        <table class="table table-border">
            <tr>
                <th></th>
                <th>红方</th>
                <th>蓝方</th>
                <!--<th>踢出</th>-->
            </tr>

            <tr>
                <td class="">开盆</td>
                <td>{{info.info.red_kaipen}}</td>
                <td>{{info.info.blue_kaipen}}</td>
                <!--<td>{{info.red_kaipen_kill}}</td>-->

            </tr>

            <tr>
                <td class="">七扣</td>
                <td>{{info.info.red_qikou}}</td>
                <td>{{info.info.blue_qikou}}</td>
                <!--<td>123</td>-->
            </tr>

            <tr>
                <td class="">六扣</td>
                <td>{{info.info.red_liukou}}</td>
                <td>{{info.info.blue_liukou}}</td>
                <!--<td>123</td>-->
            </tr>

            <tr>
                <td class="">五扣</td>
                <td>{{info.info.red_wukou}}</td>
                <td>{{info.info.blue_wukou}}</td>
                <!--<td>123</td>-->
            </tr>
            <tr>
                <td class="">四扣</td>
                <td>{{info.info.red_sikou}}</td>
                <td>{{info.info.blue_sikou}}</td>
                <!--<td>123</td>-->
            </tr>


            <!--<tr>-->
                <!--<td class="">积分总计</td>-->
                <!--<td>{{info.red_reward}}</td>-->
                <!--<td>{{info.blue_reward}}</td>-->
                <!--&lt;!&ndash;<td>123</td>&ndash;&gt;-->
            <!--</tr>-->

            <!--<tr>-->
                <!--<td class="">投注总计</td>-->
                <!--<td>{{info.red_total}}</td>-->
                <!--<td>{{info.blue_total}}</td>-->
                <!--&lt;!&ndash;<td>123</td>&ndash;&gt;-->
            <!--</tr>-->

            <tr>

            </tr>

        </table>

        

        <div class="row cl">
            <div class="col-xs-12 col-sm-12 pt_10 pb_10">
                <div class="text_center font_0">
                    <div class="radio-box">
                        <input type="radio" id="winner1" name="winner" value="1" ng-model="winner"/>
                        <label for="winner1">红方胜</label>
                    </div>

                    <div class="radio-box">
                        <input type="radio" id="winner0" name="winner" value="0" ng-model="winner"/>
                        <label for="winner1">平局</label>
                    </div>


                    <div class="radio-box">
                        <input type="radio" id="winner2" name="winner" value="2" ng-model="winner"/>
                        <label for="winner2">蓝方胜</label>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 pt_10 mb_20 text_center">
                <button class="btn btn-warning radius col-xs-6 gameOverBtn" ng-class="{'disabled':info.status==-1}" ng-click="qie(-1)">结算本剧</button>
            </div>
            
        </div>
    
    <!--打赏记录列表（样式在public/static/css/game_start.css文件里面）-->
        <div class="row cl">
            <div class="rewardRecordWrap font_0">
                <label class="rewardLabel">操作日志：</label>
                <div class="rewardView">
                    <ul class="rewardList">
                        <li ng-repeat="chat in chats">{{chat.content}}</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</article>

{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->

<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/lib/Base64.js"></script>
<script>
    /*
    备注：该代码是判断打赏历史记录显示最新数据（定位显示在打赏记录的最底部）
    以后添加查看打赏记录功能时，只需要在数据加载后拷贝该代码调用即可
    * */
    // setTimeout(function () {
    //     if($('.rewardList').height() >= $('.rewardView').height()){
    //         $('.rewardList').scrollTop($('.rewardList').height() - $('.rewardView').height());
    //     }
    // },300)
</script>
<script type="text/javascript">
    var ws,myscope;
    var app = angular.module('app',[]);
    var id = {$game_id};//游戏ID

    app.controller('controller',function ($scope,$http) {
        $scope.chats = [];
        $scope.info = {
            status:0,
            red_reward:0,
            red_total:0,
            blue_reward:0,
            blue_total:0
        };
        //播放 admin暂时不需要
        $scope.readyplay = function (t, b) {

        }

        //切换比赛阶段  1=开盆 2闷盆 7=七扣 6=六口 5=五口
        $scope.qie = function (status) {
            var data = {id:id,type:"game_change",status:status,data:null};
            var str ;
            switch (status){
                case 10:
                    str = "确认切换到 开盆？"
                    break;
                case 7:
                    str = "确认切换到 七扣？"
                    break;
                case 6:
                    str = "确认切换到 六扣？"
                    break;
                case 5:
                    str = "确认切换到 五扣？"
                    break;
                case 4:
                    str = "确认切换到 四扣？"
                    break;
                case -1:
                    if (!$scope.winner){
                        $.Huimodalalert("请选择胜方!",1000);
                        return;
                    }
                    str = "确认结算本本局？"
                    data.data = {winner:$scope.winner};
                    break;
                default:
                    console.log("系统错误...");
                    break;
            }
            if (window.confirm(str)){
                mysend(JSON.stringify(data));
                if (status==-1) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.$('.btn-refresh').click();
                    parent.layer.close(index);
                }
            }


        }

        //投注暂停和继续
        $scope.togglegame = function () {
            if ($scope.info.status == 0 || $scope.info.status == -1){
                alert("当前状态不可操作");
                return;
            }
            var str = '';
            if ($scope.info.status > 0 ){
                str = '确认终止投注吗?'
            }else if ($scope.info.status < -1){
                str = '确认继续打开投注吗?'
            }
            var data = {id:id,type:"game_change",status:0 - $scope.info.status,data:null};
            if (window.confirm(str)){
                mysend(JSON.stringify(data));
            }
        }

        //扣   接放扣在服务端处理？
        $scope.kou = function (score,kid,direction) {
            kdata = {
                score:score,
                kid:kid,
                direction:direction
            };
            mysend(JSON.stringify(kdata));
        }
        //绑定UID
        $scope.binduid = function (clientid) {
            $http.get('{:url("auth/bind","",false)}/clientid/'+clientid).then(function () {
                mysend(JSON.stringify({type:"report",id:id}));
            });
            console.log("clientid:"+clientid);
        }

    });

    function mysend(data) {
        ws.send(new Base64().encode(data));
    }
    
    function connectWs() {
        ws = new WebSocket("wss:{$system.domain}:19999");

        ws.onopen = function (event) {
            status = true;
            console.log(event);
            myscope = angular.element(document.querySelector("[ng-controller=controller]")).scope();
            setTimeout(function () {

                topsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199.m3u8";
                bottomsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199t.m3u8";
                myscope.readyplay(topsrc,bottomsrc);
            },2000);


        }
        ws.onmessage = function (p1) {
            var str = new Base64().decode(p1.data);
            var data = JSON.parse(str);
            console.log(data);
            var type = data.type || '';
            switch (type){
                //初始化绑定UID CLIENTID
                case "init":
                    myscope.binduid(data.data);
                    break;
                //状态回调
                case "status":
                    //这里要用HUI弹窗
                    if (data.data){
                        $.Huimodalalert('操作成功！',1000);
                    }else{
                        $.Huimodalalert('操作失败！',1000);
                    }
                    break;
                //UI更新
                case "game_update":
                    myscope.info = data.data;
                    myscope.$apply();
                    break;
                case "result":
                    console.log("结算完成，关闭页面 刷新上一个列表");
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.$('.btn-refresh').click();
                    parent.layer.close(index);
                    break;
                case "chat":
                    if (data.data != undefined){
                        data.content = data.from+":"+data.data;
                    }
                    myscope.chats.push(data);
                    myscope.$apply();
                    break;
                case "ping":
                    mysend(JSON.stringify({type:'pong'}));
                    break;
            }

            //刷新info
//            myscope.info = {red_reward:5000,red_total:5000,blue_reward:5000,blue_total:3500};
//            myscope.$apply();

        }
        ws.onerror = function (event) {
            setTimeout(function () {
                $.Huimodalalert('服务器连接丢失,尝试重新连接', 1000);
                connectWs();
            },1000);
        }
        ws.onclose = function (p1) {

        }
    }

    connectWs();
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
